<template>
    <div id="login">
        <div class="left-bg">
            <div class="bg-content">
                <img class="bg-logo" src="../../assets/login/logo.png" alt="">
                <h1>优爆名品管理系统</h1>
                <h3>让管理变得更简单</h3>
            </div>
        </div>
        <div class="right-form">
            <div class="form-content">
                <h2>管理系统登录</h2>
                <el-input type="text" placeholder="请输入用户名" :suffix-icon="yonghuming" v-model="username" @change="handleChangeuserAccount"></el-input>
                <el-input type="passWord" placeholder="请输入密码" v-model="password" :suffix-icon="mima" @change="handleChangePassword"></el-input>
                <el-button @click="handleClickLogin">立即登录</el-button>
                <el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>
        </div>
        <choseUserGroupRole v-if="isShow" :isShow='isShow' :groupRoleList="groupRoleList" @cancelShow="cancelShow" @choseUserGroupRole="choseUserGroupRole"></choseUserGroupRole>
    </div>
</template>
<script>
    import choseUserGroupRole from './choseUserGroupRole'
    export default {
        components: { choseUserGroupRole },
        data() {
            return {
                loginType: 'pwd',
                checked: false,
                yonghuming: 'iconfont icon-yonghuming',
                mima: 'iconfont icon-mima',
                loginType: 'pwd',
                password: '',
                username: '',
                verifyCode: '',
                groupRoleList: [],
                userPower: null,
                isShow: false,
                userInfos: {
                    userInfo: null,
                    groupRoleList: [],
                    userPower: []
                },
                systemId: 1,
            }
        },
        mounted() {
            sessionStorage.clear()
            if(this.username !== '') {
                this.handleChangeuserAccount()
            }
            if(this.password !== '') {
                this.handleChangePassword()
            }
        },
        methods: {
            handleChangeuserAccount() {
                this.yonghuming= 'iconfont icon-yonghuming-'
            },
            handleChangePassword() {
                this.mima= 'iconfont icon-mima-'
            },
           async handleClickLogin() {
                try{
                    if(this.username !== '' && this.password !== '') {
                        var params= {
                            username: this.$md5(this.username),
                            password: this.$md5(this.password),
                            loginType: this.loginType,
                            verifyCode: this.verifyCode,
                            systemId: 1
                        }
                        await this.$server.loginAuthorityControlApi.systemLogin(params).then(res => {
                            this.userInfos.userInfo= res.data
                            sessionStorage.setItem('sessionId', res.data.sessionId)
                            sessionStorage.setItem('userInfo', JSON.stringify(res.data))
                            this.getUserGroupSRole(res.data.userId, this.systemId)
                        })  
                    }  
                }catch(err){
                    this.$paramsError(err)
                }
            },
            getUserGroupSRole(id, systemId) {

                this.$server.loginAuthorityControlApi.getUserGroupsRole(id, systemId).then(res => {
                    this.groupRoleList= res.data
                    this.userInfos.groupRoleList= res.data
                    this.isShow= true
                    // this.$router.push({
                    //     name: 'home'
                    // })
                })
        
            },
            choseUserGroupRole(data) {
                console.log(data, 'data')
                if(data) {
                    this.userPower= data
                    this.userInfos.userPower= data
                    sessionStorage.setItem('userInfos', JSON.stringify(this.userInfos))
                    this.$router.push({
                        name: 'home'
                    })
                }
            },
            cancelShow(title) {
                this.isShow= title
            }
        }
    }
</script>
<style lang="less" scoped>
    body{
        position: relative;
    }
    #login { 
         min-height: 700px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; 
        display: flex;
        flex-direction: row;
        .left-bg { 
            flex: 0.671875;
            height: 100%;
            background: url(http://www.doudoufei.vip/beijing.png);
            background-size: 100% 100%; 
            display: flex;
            align-items: center;
            justify-content: center;
            .bg-content {
                height: 300px;
                margin-top: 100px;
                .bg-logo {
                    margin-bottom: 10px;
                }
                h1 {
                    font-size: 50px;
                    color: #fff;
                    font-family: PingFangSC-Semibold;
                    font-weight: normal;
                    letter-spacing: 2px;
                }
                h3 {
                    font-size: 18px;
                    color: #fff;
                    //margin-top: 5px;
                    font-weight: 400;
                    letter-spacing: 1.5px;
                }
            }
        }
        .right-form {
            flex: 0.328125;
            height: 100%;
            background: #fff;
            display: flex;
            align-items: center;
            .form-content {
                width: 270px;
                min-height: 300px;
                margin: auto;
                h2 {
                    font-size: 28px;
                    margin-bottom: 30px;
                    color: #341b1c;
                    font-weight: normal;
                    font-family: PingFangSC-Semibold;
                }
                .el-input {
                    margin-bottom: 20px;
                }
                .el-button {
                    width: 100%;
                    background: #ff7068;
                    color: #fff;
                }
            }
        }
    }
</style>